<template>
  <div class="app-container">
    <main-form
      :form-data="formData"
      @submit="submit"
      @showPwdContainer="showPwdContainer"
    />
    <el-dialog
      title="更改登录密码"
      :visible.sync="dialogVisible"
    >
      <main-pwd
        ref="child"
        :user-id="formData.id"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import mainForm from './components/main-form'
import mainPwd from './components/main-pwd'
import { getUserByToken, updateOne, resetPwd } from '@/api/user'

export default {
  components: {
    mainForm,
    mainPwd
  },
  data() {
    return {
      formData: {},
      dialogVisible: false
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      const { data } = await getUserByToken()
      this.formData = data
    },
    showPwdContainer() {
      this.dialogVisible = true
    },
    submit(model, actName) {
      if (actName === 'changePwd') {
        resetPwd(model.id, model).then((res) => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this.dialogVisible = false
          this.$refs.child.reset('ruleForm')
        })
      }
      if (actName === 'changeProfile') {
        updateOne(model.id, model).then((res) => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this.$store.commit('user/SET_PICTURE', model.picture)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

